<script setup lang="tsx">
import { useI18n } from 'vue-i18n'
import { useLocaleStore } from '@/renderer/store/locale'
import { onMounted } from 'vue'

const { locale } = useI18n()
const localeStore = useLocaleStore()

onMounted((): void => {
  if (localeStore.selected) {
    locale.value = localeStore.selected
  }
})

const handleChangeLanguage = (val: string): void => {
  locale.value = val
  localeStore.selected = val
}
</script>
<template>
  <v-badge location="top right" :offset-y="7" :offset-x="5" class="click-through-badge">
    <template #badge>
      <v-img width="10" height="7" rounded="sm" :src="localeStore.getIcon()"></v-img>
    </template>
    <v-menu transition="fade-transition" :offset="14">
      <template #activator="{ props }">
        <v-btn
          v-tooltip:start="$t('locale.title')"
          class="ma-1"
          density="compact"
          rounded="lg"
          icon="mdi-earth"
          v-bind="props"
        >
        </v-btn>
      </template>
      <v-list class="mb-2">
        <v-list-item
          v-for="n in localeStore.list"
          :key="n.value"
          density="compact"
          @click="handleChangeLanguage(n.value)"
        >
          <v-list-item-title>{{ n.title }}</v-list-item-title>
          <template #prepend>
            <v-img class="mr-2" :src="n.src" width="20" height="15" rounded="sm"></v-img>
          </template>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-badge>
</template>

<style>
.click-through-badge .v-badge__badge {
  background: transparent !important;
  pointer-events: none;
}
</style>
